<template>
    <div class="coupon mt12 mx12" :class="{unable : data.state !== 1}" flex @click="openDetail">
        <div class="left white" flex="main:center cross:center">
            <span class="f24">￥</span>
            <span class="f32" style="font-weight: bold">{{Number(data.freeMoney / 100).toFixed(2)}}</span>
        </div>
        <div class="right f13 ml20" flex="dir:top main:center">
            <p class="f16" style="font-weight: bold">{{data.title}}</p>
            <p class="mt6">加油满{{data.minSpend / 100}}元即可使用</p>
            <p class="mt6">{{data.startDate | dateFormat('MM月DD日')}} - {{data.endDate | dateFormat('MM月DD日')}} 有效</p>
        </div>
        <slot></slot>
    </div>
</template>
<script>
  export default {
    props: {
      data: {
        type: Object,
        default: {}
      },
      isLink: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {}
    },
    computed: {},
    methods: {
      openDetail () {
        if (!this.isLink) return
        this.$router.push({name: 'coupon_detail', params: {...this.data}})
      }
    },
    components: {}
  }
</script>
<style type="text/scss" lang="scss" scoped>
    .coupon {
        height: 105px;
        background-image: url("bg.png");
        background-size: 100%;
        background-position: center;
        .left {
            width: 41%;
        }
        &.unable {
            background-image: url("./bd_desabled.png");
            color: #666;
        }
    }
</style>
